<template>
    <div class="wrapper">
        <div class="left-container">
            <el-card
                class="userInfo"
                shadow="never"
                style="border: none; background: #fff"
            >
                <div
                    class="account-avatar"
                    :style="`background-image:url(${userInfo.avatar})`"
                ></div>
                <div class="name_container">
                    <div class="account-name ellipsis">
                        <span>{{ userInfo.account }}</span>
                        <span class="level_box medium">
                            <i class="lv"></i>
                            <i
                                class="lv1"
                                :style="`background-image:url(https://rs.dance365.com/level_num_${userInfo.level}@3x.png)`"
                            ></i>
                        </span>
                    </div>
                </div>
                <el-row>
                    <el-col :span="12">
                        <div class="account-number">
                            <div class="account-count">0</div>
                            <div class="tip">关注</div>
                        </div>
                    </el-col>
                    <el-col :span="12">
                        <div class="account-number">
                            <div class="account-count">0</div>
                            <div class="tip">粉丝</div>
                        </div>
                    </el-col>
                </el-row>
            </el-card>
            <el-card
                class="navigation-block"
                shadow="never"
                style="border: none; background: #fff"
            >
                <div class="navigation-item">
                    <!-- <a href="javascript:;" class="navigation-item-content"
                        >资源动态</a
                    > -->
                    <router-link
                        to="/center/dynamics"
                        class="navigation-item-content"
                        :class="current_route == 'dynamics' ? 'active' : ''"
                        >资源动态</router-link
                    >
                </div>
            </el-card>
            <el-card
                class="navigation-block"
                shadow="never"
                style="border: none; background: #fff"
            >
                <div class="navigation-item">
                    <!-- <a href="javascript:;" class="navigation-item-content"
                        >我的会员</a
                    > -->
                    <router-link
                        to="/my_member"
                        class="navigation-item-content"
                        :class="
                            route.fullPath.includes('my_member') ? 'active' : ''
                        "
                        >我的会员</router-link
                    >
                </div>
                <div class="navigation-item">
                    <router-link
                        to="/center/wallet"
                        class="navigation-item-content"
                        :class="current_route == 'wallet' ? 'active' : ''"
                        >我的钱包</router-link
                    >
                </div>
                <div class="navigation-item">
                    <router-link
                        to="/center/coupons"
                        class="navigation-item-content"
                        :class="current_route == 'coupons' ? 'active' : ''"
                        >我的优惠券</router-link
                    >
                </div>
                <div class="navigation-item">
                    <router-link
                        to="/center/my_order"
                        class="navigation-item-content"
                        :class="current_route == 'my_order' ? 'active' : ''"
                        >我买的订单</router-link
                    >
                </div>
                <div class="navigation-item extend" @click="handleOpen">
                    <a
                        class="navigation-item-content"
                        :class="current_route == 'seller' ? 'active' : ''"
                        >我买的</a
                    >
                    <el-icon class="icon">
                        <ArrowRight v-if="isExtend" />
                        <ArrowDown v-else />
                    </el-icon>
                </div>
                <transition name="pull_down">
                    <div
                        v-show="isExtend"
                        class="extend navigation-sub-content sell"
                    >
                        <router-link
                            to="/center/seller/orders_manager"
                            class="navigation-sub-item"
                            :class="
                                current_route_route == 'orders_manager'
                                    ? 'active'
                                    : ''
                            "
                            >订单管理</router-link
                        >
                        <router-link
                            to="/center/seller/goods_manager"
                            class="navigation-sub-item"
                            :class="
                                current_route_route == 'goods_manager'
                                    ? 'active'
                                    : ''
                            "
                            >商品管理</router-link
                        >
                        <router-link
                            to="/center/seller/customers_manager"
                            class="navigation-sub-item"
                            :class="
                                current_route_route == 'customers_manager'
                                    ? 'active'
                                    : ''
                            "
                            >客户管理</router-link
                        >
                        <router-link
                            to="/center/seller/pending_payments_manager"
                            class="navigation-sub-item"
                            :class="
                                current_route_route ==
                                'pending_payments_manager'
                                    ? 'active'
                                    : ''
                            "
                            >待收款</router-link
                        >
                        <router-link
                            to="/center/seller/minePreferentialManagement"
                            class="navigation-sub-item"
                            :class="
                                current_route_route ==
                                'minePreferentialManagement'
                                    ? 'active'
                                    : ''
                            "
                            >优惠管理</router-link
                        >
                        <router-link
                            to="/center/seller/mineReviewsManagement"
                            class="navigation-sub-item"
                            :class="
                                current_route_route == 'mineReviewsManagement'
                                    ? 'active'
                                    : ''
                            "
                            >评价管理</router-link
                        >
                        <router-link
                            to="/center/seller/deposit"
                            class="navigation-sub-item"
                            :class="
                                current_route_route == 'deposit' ? 'active' : ''
                            "
                            >保证金</router-link
                        >
                    </div>
                </transition>
            </el-card>
            <el-card
                class="navigation-block"
                shadow="never"
                style="border: none; background: #fff"
            >
                <div class="navigation-item">
                    <!-- <a href="javascript:;" class="navigation-item-content"
                        >我的资料</a
                    > -->
                    <router-link
                        to="/center/edit_info"
                        class="navigation-item-content"
                        :class="current_route == 'edit_info' ? 'active' : ''"
                        >我的资料</router-link
                    >
                </div>
            </el-card>
        </div>
        <div class="right-container">
            <!-- <el-card shadow="always"> </el-card> -->
            <router-view></router-view>
        </div>
    </div>
</template>

<script setup lang="ts">
import { computed, onMounted, ref } from "vue";
import { useRoute } from "vue-router";
import { useUserInfoStore } from "@/stores/modules/userInfo";

// 获取个人信息

const userInfoStore = useUserInfoStore();
const getUserInfo = () => {
    userInfoStore.getUserInfo();
};
const userInfo = computed(() => {
    return userInfoStore.userInfo;
});
onMounted(() => {
    getUserInfo();
});

// 获取当前页面路由
const route = useRoute();
// console.log(route.fullPath);
// 计算二级路由
const current_route = computed(() => {
    let arr = route.fullPath.split("/");
    return arr[2];
});
// 计算三级路由
const current_route_route = computed(() => {
    let arr = route.fullPath.split("/");
    return arr[3] || "";
});

const isExtend = ref(false);
const handleOpen = () => {
    isExtend.value = !isExtend.value;
};
</script>

<style scoped lang="less">
// 过渡
.pull_down-enter-from,
.pull_down-leave-to {
    height: 0;
}
.pull_down-enter-to,
.pull_down-leave-from {
    height: 302.4px;
}
.pull_down-enter-active,
.pull_down-leave-active {
    transition: all 0.3s linear;
}
.wrapper {
    width: 100%;
    display: flex;
    .left-container {
        width: 170px;
        margin-right: 10px;
        .userInfo {
            padding: 21px 0;
            text-align: center;
            background: #fff;
            border-radius: 4px;
            margin-bottom: 10px;
            // 去除el-card的padding
            /deep/.el-card__body {
                padding: 0 !important;
            }
            .account-avatar {
                cursor: pointer;
                background-image: url("../../../src/static/test.jpg");
                display: inline-block;
                width: 100px;
                height: 100px;
                border-radius: 100%;
                background-color: #eee;
                background-size: cover;
                background-position: 50%;
                background-repeat: no-repeat;
            }
            .name_container {
                text-align: center;
                display: flex;
                align-items: center;
                justify-content: center;
                .account-name {
                    font-size: 16px;
                    color: #111;
                    text-align: center;
                    padding: 6px 0 6px;
                    width: 120px;
                    word-break: break-all;
                }
                .level_box {
                    box-sizing: border-box;
                    background: linear-gradient(#ff289b, #ff43d0);
                    border: 1px solid #fff;
                    border-radius: 4px;
                    padding: 0 8px;
                    display: inline-block !important;
                    line-height: 1.15;
                    white-space: nowrap;
                    cursor: pointer;
                    margin-left: 4px;
                    .lv {
                        width: 15px;
                        height: 10px;
                        background-image: url(https://rs.dance365.com/level_Lv.@3x.png);
                    }
                    .lv1 {
                        background-image: url(https://rs.dance365.com/level_num_1@3x.png);
                    }
                    i {
                        width: 8px;
                        height: 10px;
                        display: inline-block;
                        background-size: 100%;
                        background-repeat: no-repeat;
                    }
                }
            }
            .account-number {
                cursor: initial;
                text-align: center;
                padding-top: 18px;
                .account-count {
                    color: #111;
                    font-size: 16px;
                    margin: 0 0 7px;
                }
                .tip {
                    font-size: 14px;
                    color: #7d8090;
                    margin: 0 0 0;
                }
            }
        }
        .navigation-block {
            background: #fff;
            border-radius: 4px;
            padding: 5px 0;
            margin-bottom: 10px;

            // 去除el-card的padding
            /deep/.el-card__body {
                padding: 0 !important;
            }
            .navigation-item-content {
                font-size: 14px;
                color: #111;
                padding: 17px 21px;
                cursor: pointer;
                position: relative;
                display: block;
                text-decoration: none;
                &:hover {
                    &::before {
                        background-color: #f93684;
                        content: " ";
                        position: absolute;
                        width: 4px;
                        height: 37px;
                        left: 0;
                        top: 50%;
                        transform: translateY(-50%);
                        transition: background-color 0.3s ease;
                    }
                }
                &.active::before {
                    background-color: #f93684;
                    content: " ";
                    position: absolute;
                    width: 4px;
                    height: 37px;
                    left: 0;
                    top: 50%;
                    transform: translateY(-50%);
                    transition: background-color 0.3s ease;
                }
            }
            .navigation-sub-item {
                color: #111;
                font-size: 14px;
                padding: 12px 0 12px 49px;
                cursor: pointer;
                display: block;
                text-decoration: none;
                &.active {
                    color: #f93684;
                }
            }
            .navigation-item.extend {
                position: relative;
                .icon {
                    color: #333;
                    float: right;
                    position: absolute;
                    right: 20px;
                    top: 44%;
                    font-size: 12px;
                }
            }
        }
    }
    .right-container {
        width: 1020px;
    }
}
</style>
